<template>
  <!-- 测试 vue/html-self-closing 规则 -->
  <div>
    <img src="/logo.png" />
    <!-- 应使用自闭合标签 -->
    <input type="text" />
    <!-- 应使用自闭合标签 -->
    <custom-component></custom-component>
    <!-- 应使用自闭合标签 -->
  </div>

  <!-- 测试 vue/max-attributes-per-line 规则 -->
  <div id="test" class="container" role="main" aria-label="测试组件">
    <!-- 超过3个属性应换行 -->
    <p>属性过多的例子</p>
  </div>

  <!-- 测试 vue/attribute-hyphenation 规则 -->
  <button myProp="value">点击</button>
  <!-- 属性名应使用连字符形式 -->

  <!-- 测试 vue/no-v-html 规则 -->
  <div v-html="htmlContent"></div>
  <!-- 应避免使用v-html -->

  <!-- 测试 vue/no-template-shadow 规则 -->
  <div v-for="item in items" :key="item.id">
    <div v-for="subitem in item.subitems" :key="subitem.id">
      <!-- 修复循环变量名重复 -->
      {{ subitem.name }}
    </div>
  </div>

  <!-- 测试 vue/component-name-in-template-casing 规则 -->
  <MyComponent />
  <!-- 组件名称大小写规则 -->
</template>

<script setup lang="ts">
  import {
    ref
    // computed
  } from 'vue'

  // 定义接口
  interface Item {
    id: number
    name: string
    subitems: SubItem[]
  }

  interface SubItem {
    id: number
    name: string
  }

  // 测试 vue/no-unused-vars 规则
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const unusedVar = ref('未使用的变量')

  // 测试 vue/return-in-computed-property 规则

  // const noReturnComputed = computed(() => {
  //   const value = 123
  //   // 缺少return语句
  // })

  // 测试 vue/no-setup-props-destructure 规则
  const props = defineProps({
    // eslint-disable-next-line
    title: String,
    count: {
      type: Number,
      default: 0
    }
  })

  // 错误的解构方式
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const { title } = props // 应该使用toRefs或computed

  // 正确的使用方式
  const htmlContent = '<span>危险的HTML内容</span>'
  const items = ref<Item[]>([
    { id: 1, name: '项目1', subitems: [{ id: 1, name: '子项目1' }] },
    { id: 2, name: '项目2', subitems: [{ id: 2, name: '子项目2' }] }
  ])

  // 测试 vue/valid-v-for 规则
  // function processItems() {
  //   // 一些处理逻辑
  //   console.log(items.value)
  // }
</script>

<style scoped>
  .container {
    padding: 20px;
    background-color: #f5f5f5;
  }
</style>
